<template>
  <view class="tab-bar">
    <u-tabbar :value="value" activeColor="#75CECC" height="70px">
      <u-tabbar-item :text="$t('index.shouYe')" name="index" :icon="icons.iconIndex" @click="bottomClick('index')" />
      <u-tabbar-item :text="$t('bottom.xiaoXi')" name="message" :icon="icons.iconMessage" @click="bottomClick('message')" />
      <u-tabbar-item :text="$t('bottom.huiYuan')" name="member" :icon="icons.iconMember" @click="bottomClick('member')" />
      <u-tabbar-item :text="$t('bottom.woDe')" name="mine" :icon="icons.iconMine" @click="bottomClick('mine')" />
    </u-tabbar>
  </view>
</template>

<script>
export default {
  data() {
    return {
      value: "index",
    };
  },
  computed: {
    imgPath() {
      return this.$config.baseURL + "/static/front";
    },
    icons() {
      const routes = getCurrentPages();
      const curRoute = routes[routes.length - 1].route;
      const iconMap = {
        "pages/index/index": {
          iconIndex: this.imgPath + "/images/icon/bottom_index_active.png",
          iconMessage: this.imgPath + "/images/icon/bottom_message.png",
          iconMember: this.imgPath + "/images/icon/bottom_user.png",
          iconMine: this.imgPath + "/images/icon/bottom_mine.png",
        },
        "pages/message/message": {
          iconIndex: this.imgPath + "/images/icon/bottom_index.png",
          iconMessage: this.imgPath + "/images/icon/bottom_message_active.png",
          iconMember: this.imgPath + "/images/icon/bottom_user.png",
          iconMine: this.imgPath + "/images/icon/bottom_mine.png",
        },
        "pages/member/member": {
          iconIndex: this.imgPath + "/images/icon/bottom_index.png",
          iconMessage: this.imgPath + "/images/icon/bottom_message.png",
          iconMember: this.imgPath + "/images/icon/bottom_user_active.png",
          iconMine: this.imgPath + "/images/icon/bottom_mine.png",
        },
        "pages/mine/mine": {
          iconIndex: this.imgPath + "/images/icon/bottom_index.png",
          iconMessage: this.imgPath + "/images/icon/bottom_message.png",
          iconMember: this.imgPath + "/images/icon/bottom_user.png",
          iconMine: this.imgPath + "/images/icon/bottom_mine_active.png",
        },
      };
      const icons = iconMap[curRoute] || iconMap["pages/index/index"];
      this.value =
        Object.keys(iconMap).find((route) => route === curRoute) || "index";
      return icons;
    },
  },
  methods: {
    bottomClick(pageName) {
      const TOKEN = uni.getStorageSync("token");
      if (!TOKEN) {
        uni.reLaunch({
          url: "/pages/register/regist_index",
        });
        return false;
      }
      this.value = pageName;
      const urls = {
        index: "/pages/index/index",
        message: "/pages/message/message",
        member: "/pages/member/member",
        mine: "/pages/mine/mine",
      };
      uni.redirectTo({
        url: urls[pageName],
      });
    },
  },
};
</script>

<style lang="scss">
/* 在全局样式文件中添加以下CSS规则 */
</style>
